import React from 'react';
import {
    Text,
    View,
    StyleSheet,
    TouchableOpacity,
} from 'react-native';
import CommonStyle from '../CommonStyle';
import {observer} from 'mobx-react';

@observer
export default class EventScreeningItem extends React.Component {
    render (){
        const {item,style,navigation}=this.props;
        let bgColor = item.unChoosed?{backgroundColor:'white'}:{backgroundColor:CommonStyle.color_deep_red};
        let fontColor = item.unChoosed?{color:CommonStyle.color_black}:{color:'white'}
        return (
            <TouchableOpacity  style={[styles.item,style,bgColor]}
                onPress={()=>{
                    this.props.onItemPress();
                }}
            >
                <Text style={[styles.league,fontColor]}>{item.eventShortName}</Text>
                <Text style={[styles.numbers,fontColor]}>{item.eventNum}</Text>
            </TouchableOpacity>
        );
    }
}

const styles=StyleSheet.create({
    item: {
        flexDirection:'row', 
        width:(CommonStyle.screenwidth-40)/3,
        height:32,
        borderRadius:4,
        alignItems:'center',
        marginRight:5,
        marginTop:6

    },
    league: {
        marginLeft: 5,
        flex: 4,
        fontSize:CommonStyle.fontSize_12


    },
    numbers: {
        marginRight: 5,
        flex:1,
        fontSize:CommonStyle.fontSize_12
    },
})